<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>中国国家统计局数据</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="site.css" />
    <script src="echarts.min.js"></script>
    <script src="vue.js"></script>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="jquery-ui.js"></script>
    <script src="jquery.ui.touch-punch.min.js"></script>
</head>

<body>
    <div id="app" class="container-fluid">
        <div id="head" class="container">
            <h1 class="text-center" style="margin-bottom:50px;">中国国家统计局数据</h1>
        </div>
        <div id="content" class="container-fluid">
            <div class="row" style="margin-left: 10px;margin-right: 10px;">
                <div id="charts" class="col-lg-10">
                    <div class="container">
                        <div class="" v-for="c in selected_charts">
                            <!-- ${c.name} ${c.id} -->
                            <div :id="'c_' + c.id" :style="chart_style"></div>
                        </div>
                    </div>
                </div>
                <div id="settings" class="col-lg-2">
                    <label for="">省份</label>
                    <span class="input-group-btn btn-group">
                        <button class="btn btn-secondary" type="button" @click="select_provinces('all')" title="All">
                            <!-- <span class="oi oi-media-play" aria-hidden="true"></span> -->
                            全部
                        </button>
                        <button class="btn btn-secondary" type="button" @click="select_provinces('reverse')" title="All">
                            <!-- <span class="oi oi-media-play" aria-hidden="true"></span> -->
                            反选
                        </button>
                    </span>
                    <ul class="sorted_list border border-success" style="max-height:8rem;overflow-y:scroll">
                        <li v-for="p in all_provinces">
                            <label class="custom-control custom-checkbox py-0 m-0 align-items-end w-100">
                                <input class="custom-control-input" type="checkbox" v-model="p.selected">
                                <span class="custom-control-indicator"></span>
                                <span class="custom-control-description">
                                    <!-- <span class="oi oi-elevator" aria-hidden="true"></span> -->
                                    ${p.name}
                                </span>
                            </label>
                        </li>
                    </ul>

                    <label for="">图表</label>
                    <div class="input-group mb-1">
                        <!-- <span class="input-group-addon">筛选</span> -->
                        <input v-model="key" type="text" class="form-control" placeholder="筛选" aria-label="filter">
                    </div>
                    <ul class="sorted_list border border-success" id="charts_order">
                        <li v-for="c in filtered_charts" :id="'o_' + c.id">
                            <label class="custom-control custom-checkbox py-0 m-0 align-items-end w-100">
                                <input class="custom-control-input" type="checkbox" v-model="c.selected">
                                <span class="custom-control-indicator"></span>
                                <span class="custom-control-description">
                                    <!-- <span class="oi oi-elevator" aria-hidden="true"></span> -->
                                    ${c.title}
                                </span>
                            </label>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="china.js"></script>
<script src="data_files.js"></script>
<script src="app.js"></script>

</html>